<template>
  <div class="enshrine-container">
    <van-list :finished="finished" finished-text="没有更多了">
      <div v-for="(item, index) in list" :key="index" class="enshrine-list" @click="onBtn" :index="index">
      	<div class="list-left">
	          <img class="left-img" :src="item.diningImage">
	        </div>
	        <div class="list-center">
	          <div style="font-size:15px">{{item.diningName}}</div>
	          <div style="color:#8a8a8a;">
	            <van-rate
	              class="list-rate"
	              disabled
	              disabled-color="#ff9910"
	              :size="10"
	              :value="parseInt(item.grade)"
	            />
	            {{parseInt(item.grade)}}分
	          </div>
	          <div style="color:#8a8a8a;">{{item.time}}</div>
	        </div>
	        <div class="list-right">
	          <div @click="onBtn" :index="index" class="list-btn">再来一单</div>
	        </div>
      	</div>
    </van-list>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      finished: false
    };
  },
  created() {
    this.getlist();
  },
  activated() {
    this.getlist();
  },
  methods: {
    onBtn(e) {
    	console.log(e)
      let that = this;
      let index = e.currentTarget.getAttribute("index");
      localStorage.setItem("storeid", that.list[index].diningId);
//    console.log(that.list[index]);
      that.$router.push({
        name: "storedetail"
      });
    },
    getlist() {
      let that = this;
      that.$toast.loading({
        message: "加载中..."
      });
      var Sukdata = {
        userId: localStorage.getItem("userid")
      };
//    console.log(Sukdata);
      that.axios
        .post(
          that.baseUrl + "/collect/queryLieBiao",
          that.Qs.stringify(Sukdata),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(function(res) {
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              if (res.data.data == "暂无收藏") {
                that.list = [];
                that.$toast({
                  message: "暂无收藏"
                });
              } else {
                that.list = res.data.data;
                that.$toast.clear();
              }
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    }
    // onLoad() {
    //   // 异步更新数据
    //   setTimeout(() => {
    //     for (let i = 0; i < 10; i++) {
    //       this.list.push({
    //         title: `美食小铺--${i}`,
    //         img: require("@/assets/img/img_msxp.png"),
    //         time: `2018年01月${i}日`,
    //         rate: 4.6
    //       });
    //     }
    //     // 数据全部加载完成
    //     if (this.list.length >= 40) {
    //       this.finished = true;
    //     }
    //   }, 500);
    // }
  }
};
</script>
<style scoped>
.list-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9d9d9d;
  width: 60%;
  height: 20px;
  line-height: 20px;
  border: 1px solid #1fadff;
  padding: 2px;
  border-radius: 5px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.list-rate {
  display: inline-block;
}
.enshrine-container {
  font-size: 0.3rem;
  width: 100%;
}
.enshrine-list {
  display: flex;
  justify-content: space-between;
  padding: 3px 6px;
}
.list-left {
  width: 30%;
  height: 1.9rem;
}
.list-right {
  text-align: center;
  width: 30%;
}
.list-center {
  text-align: left;
  width: 40%;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}
.list-right {
  position: relative;
  width: 30%;
}
.left-img {
  width: 99%;
  height: 100%;
  border-radius: 0.1rem;
}
</style>
